<template>
  <div>
    <el-card class="box-card" style="margin-left: 100px;margin-top:40px;width: 1000px;height: 520px">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <!--题型管理选项卡-->
        <el-tab-pane label="审核题目" name="topic">
          <el-table
              :data="unAuditTopicList"
              style="width: 100%">
            <el-table-column
                prop="time"
                label="上传时间"
                width="200">
            </el-table-column>
            <el-table-column
                prop="content"
                label="标题"
                width="190">
              <template slot-scope="scope">
                <el-link type="primary" @click="specificContent(scope.row.id)">{{scope.row.title}}</el-link>
              </template>
            </el-table-column>
            <el-table-column
                prop="address"
                label="操作"
                width="250">
              <template slot-scope="scope">
                <el-button type="success" plain @click="passedTopic(scope.row.id,scope.row.userId)">通过</el-button>
                <el-button type="danger" plain @click="unPassedTopic(scope.row.id,scope.row.userId)">未通过</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <!--分页组件-->
      <div class="block" v-show="showPagination" style="float:left;margin-left: 200px" >
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNo"
            :page-sizes="[3, 5]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </div>
    </el-card>
    <!--题具体内容弹窗-->
    <el-dialog title="" :visible.sync="dialogFormVisible" style="width: 1000px" >
      <el-form ref="form" label-width="80px"style="margin-left: -30px">
        <el-form-item label="标题:">
        <el-input v-model="this.contentList.title" disabled style="width: 400px"></el-input>
        </el-form-item>
        <el-form-item label="内容:">
          <el-input v-model="this.contentList.content" disabled style="width: 400px"></el-input>
        </el-form-item>
        <el-form-item label="答案:">
          <el-input :v-model="this.contentList.answer" disabled style="width: 400px"></el-input>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "auditorUserCenter-auditorUploadTopic",
  data(){
    return{
      activeName:'',
      pageNo: 1, //当前页数
      pageSize: 3, //显示条数
      total: 0, //总条数
      showPagination: true, //分页栏是否显示
      unAuditTopicList:[{
        id:'',title:'',content:'',answer:'',userId:'',
        difficultyLevelId:'',topicTypeId:'',objectId:'',time:''
      }],
      dialogFormVisible:false,//详细内容弹窗
      contentList:{
        title:'',content:'',answer:''
      }
    }
  },
  methods:{
    //加载页面执行的方法
    loadFun(){
      this.activeName='topic';
      this.getUnAuditorTopicList();
    },
    //分页相关
    handleSizeChange(val) {
      this.pageSize=val;
      this.pageNo=1;//当切换一页显示几个的时候，我们要把页码切换第一页
      this.getUnAuditorTopicList();
      //console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.pageNo=val;
      this.getUnAuditorTopicList();
      //console.log(`当前页: ${val}`);
    },
    //获取未审核题目
    getUnAuditorTopicList(){
      this.$axios.post("/api/auditorUserCenter/getNoCheckTopicListJ",{
        pageNo:(this.pageNo - 1) * this.pageSize,
        pageSize:this.pageSize
      }).then(resp=>{
        this.unAuditTopicList=resp.data.data.topicList;
        this.total=resp.data.data.total;
      })
    },
    //点击标题查看具体内容
    specificContent(id){
      this.dialogFormVisible=true;
      for(let i=0;i<this.unAuditTopicList.length;i++){
        if(this.unAuditTopicList[i].id==id){
            this.contentList.title=this.unAuditTopicList[i].title;
            this.contentList.content=this.unAuditTopicList[i].content;
            this.contentList.answer=this.unAuditTopicList[i].answer;
            break;
        }
      }
    },
    //通过按钮
    passedTopic(topicId,userId){
      this.$confirm('是否将该道题通过审核?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.post("/api/auditorUserCenter/topicPassedJ",{
          id:topicId,
          userId:userId
        }).then(resp=>{
          this.$message({
            type: 'success',
            message: '通过成功!'
          });
          this.getUnAuditorTopicList();
        });

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    //未通过按钮
    unPassedTopic(topicId,userId){
      this.$confirm('是否将该道题审核不通过?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.post("/api/auditorUserCenter/topicUnPassedJ",{
          id:topicId,
          userId:userId
        }).then(resp=>{
          this.$message({
            type: 'success',
            message: '设置成功'
          });
          this.getUnAuditorTopicList();
        });

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    }
  },
  created() {
    this.loadFun();
  }
}
</script>

<style scoped>

</style>